<template>
	<view class="content">
		<!-- 确认支付弹窗 -->
		<uni-popup :show="type === 'pay'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">输入安全密码</text>
				<view style="padding:40upx 20upx;font-size: 30upx;color: #333;text-align: center;">
					<input type="password" placeholder="请输入安全密码" v-model="safeWord">
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="confirmOrder">确定</text>
				</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			转让区
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		<view class="orderbox">
			<!-- 地址 -->
			<view class="addressbox flex aic jsb" @click="chooseAdd" v-if="transOrder.oil_card!=='1'">
				<view class="flex aic" style="max-width: 80%;" v-if="myaddress.name!=undefined">
					<image src="../../static/p-6.png" class="addressicon"></image>
					<view class="abuotmsg">
						<view style="margin-bottom: 8upx;">{{myaddress.name}} <text style="color: #666;margin-left: 8upx;">{{myaddress.tel}}</text></view>
						<view>{{myaddress.province_name}}{{myaddress.city_name}}{{myaddress.county_name}}{{myaddress.address}}</view>
					</view>
				</view>
				<view style="margin-left: 30upx;font-size: 26upx;color: #666;" v-else>
					<view>请去添加收货地址</view>
				</view>
				<image src="../../static/f-1.png" class="fingle"></image>
			</view>
			<view class="paybox">
				<view class="flex aic jsb choosetype" @click="showcontent">
					<text>{{paymenttxt==''?'选择支付方式':paymenttxt}}</text>
					<image src="../../static/f-1.png" class="fingle fingle-up"></image>
				</view>
				<view v-show="payshow">
					<view>
						<radio-group @change="radioChange">
							<view v-for="(item,index) in typeItems" :key="index" class=" flex aic jsb" style="border-top: 2upx solid #eee;margin-right: 16upx;padding:20upx 20upx;">
								<view class="flex aic">
									<label class="label-2-text" :for="item.name">
										<text>{{item.name}}</text>
									</label>
								</view>
								<radio :id="item.name" :value="index" :checked="item.checked" color="#EC6104" style="transform:scale(0.8)"></radio>
							</view>
						</radio-group>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view>
				<view style="margin: 20upx 0;border-radius: 20upx;font-size: 30upx;color: #333;background-color: #fff;position: relative;">
					<view style="border-bottom: 2upx solid #eee;text-indent: 20upx;padding: 10upx 0;font-size: 24upx;">
						订单号：{{transOrder.order_no}}
					</view>
					<text style="color: #EC6104;font-size: 24upx;position: absolute;right:20upx;top:10upx">待转让</text>
					<view class="flex" style="position: relative;padding:20upx 30upx 10upx;">
						<view style="width: 146upx;height: 146upx;">
							<image :src="transOrder.images" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="flex-1" style="font-size: 28upx;color: #666;margin-left: 16upx;max-width: 400upx;">
							<view class="goods-info">{{transOrder.title}}</view>
							<view style="color:#EC6104;font-size: 28upx;margin-top: 16upx;">
								￥{{transOrder.price}}
							</view>
						</view>
					</view>
					<view class="flex jc-end" style="padding: 20upx;font-size: 24upx;color: #666;">购买时间:{{transOrder.addtime}}</view>
				</view>
			</view>
			<!-- <view class="flex aic jsb" style="margin-top: 20upx;padding:20upx 20upx 20upx 40upx;background-color: #fff;">
				<input type="text" placeholder="请输入验证码" style="font-size: 30upx;" v-model="yzcode"/>
				<view class="f28" style="width: 150upx;color: #1D84E8;height: 50upx;text-align: center;line-height: 50upx;" @click="dyzm" v-if="flag">
					发送验证码
				</view>
				<view class="f28" style="width: 150upx;color: #1D84E8;height: 50upx;text-align: center;line-height: 50upx;" v-else>
					{{last_time}}s 
				</view>
			</view> -->
			<!-- <button class="rebtn">确定购买</button> -->
			<!-- 底部信息 -->
			
			<view class="action-section">
				<view style="padding: 0 20upx 0 60upx;width: 100%;" class="flex aic jsb">
					<view style="font-size: 30upx;color: #666;">合计：<text style="color: #EC6104;">￥{{transOrder.price}}</text></view>
					<button class="ordersub" @click="confirmit">确定购买</button>
				</view>
			</view>
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken:'',// token
				transOrder:{},//页面展示信息
				type: '', // 弹窗
				userinfo:{},
				safeWord:'',// 安全密码
				// 支付方式
				paymenttxt:'',
				// 支付字段
				paymentype:'',
				paymentindex:null,
				yzcode:'',
				last_time:'',
				flag:true,
				// 我的地址
				myaddress:{},
				mybalance:0,//我的余额
				payshow:false,//出现支付方式
				typeItems:[
					{
						"id": "3",
						"name": "微信支付",
						"payment": "Weixin"
					},
					{
						"id": "4",
						"name": "余额支付",
						"payment": "BalancePayment"
					}
				]
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.transOrder = JSON.parse(options.item)
			if(that.transOrder.oil_card!=='1'){
				that.getAddressList()
			}
		},
		components: {
			uniPopup
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
				
			// 获取个人信息
			getUserInfo() {
				let that = this
				return new Promise((resolve, reject) => {
					postAjax('user/Center', {
						token: that.userToken
					}, function(data) {
						resolve(data.data.balance);
					})
				})
			},
			// 获取默认地址
			getAddressList() {
				let that = this
				postAjax('UserAddress/Index', {token:that.userToken}, function(data) {
					if (data.code == 0) {
						let myOdress = data.data.filter(item=>item.is_default==1)
						that.myaddress = myOdress[0]
						
					}else{
						that.myaddress=[]
					}
				})
			},
			radioChange: function(e) {
				let that = this
				that.paymentindex= e.detail.value
				that.paymenttxt = that.typeItems[that.paymentindex].name
				that.paymentype = that.typeItems[that.paymentindex].payment
				setTimeout(function(){
					that.payshow = !that.payshow
				},300)
			},
			togglePopup(type) {
				this.type = type;
			},
			async confirmit(){
				let that = this
				if(that.myaddress==undefined){
					uni.showToast({title: '请选择收货地址',icon: 'none',duration: 1000});
					return
				}
				if(that.paymentindex==null){
					uni.showToast({title: '请选择支付方式',icon: 'none',duration: 1000});
					return
				}
				if(that.paymentype=='BalancePayment'){
					let getbanlance = await that.getUserInfo();
					
					if(getbanlance*1<that.transOrder.price*1){
						uni.showToast({
							icon: 'none',
							title:'余额不足'
						})
						return
					}
				}	
				if(that.paymentype=='Weixin'){
					that.confirmOrder()
				}else{
					that.type = 'pay'
				}
			},
			showcontent(){
				this.payshow = !this.payshow
			},
			confirmOrder(){
				
				let that = this
				let paydata = {
					token:that.userToken,
					// address_id:that.myaddress.id,
					order_id:that.transOrder.order_id,
					order_transfer_id:that.transOrder.id,//订单转让ID
					payment_id:that.paymentype
				}
				paydata.address_id = that.transOrder.oil_card!=='1'?that.myaddress.id:0
				if(that.paymentype=='BalancePayment'){
					if(that.safeword==''){
						uni.showToast({title: '请输入安全密码',icon: 'none',duration: 1000});
						return
					}

					paydata.paypwd = that.safeWord
				}		
					
				console.log(paydata)	
				// return
				postAjax('Panicbuying/BuyTransfer',paydata,function(data){
					console.log(data)
					
					uni.showLoading()
					if(data.code==0){
						if(data.data.is_online_pay==1){
							let obj = data.data.data
							
							// 第一种写法，传对象
							let orderInfo = JSON.stringify(obj)			
							console.log(orderInfo)
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: orderInfo, //微信、支付宝订单数据
								success: function (res) {		
									uni.showToast({title:'支付成功'})
									setTimeout(function(){
										uni.redirectTo({
											url:'success'
										})
									},300)
								},																		
								fail: function (err) {										
									console.log(err)
									uni.showToast({title:'支付失败', icon:'none'})
									setTimeout(function(){
										uni.navigateTo({
											url:'../user/index?state=1'
										})
									},100)
								}
							});
						}else{
							uni.showToast({
								icon:'none',
								title:"转让订单购买成功"
							})
							setTimeout(function(){
								uni.navigateTo({
									url:'success'
								})
							},300)
						}
						
					}else{
						uni.showToast({icon:'none',	title:data.msg});
						setTimeout(function(){
							uni.navigateTo({
								url:'../user/index?state=1'
							})
						},100)
					}
					
					that.safeWord=''
					that.type=''
					
				})
				uni.hideLoading()
			},
			// 获取验证码
			dyzm(){
				let that = this
				postAjax('user/VerifySend',{mobile:that.userinfo.mobile},function(data){
					if(data.code == 0){
						uni.showToast({	title: data.msg,duration: 1500});						
						settime(that)
						
					}else{
						uni.showToast({	icon:'none',title:data.msg})
					}
				})
			},
			// 选择地址
			chooseAdd(){
				uni.navigateTo({
					url:'../user/address/index?type=tranbuy'
				})
			}
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.pageHeader{width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.orderbox{margin:20upx 30upx;padding-bottom: 94upx;}
	.flex-1{flex:1;}
	.addressbox{background-color: #fff;padding: 24upx;border-radius: 20upx;}
	.addressicon{width: 26upx;height: 40upx;margin-right: 20upx;}
	.abuotmsg{font-size: 28upx;color: #333;}
	.fingle{height: 22upx;width: 12upx;}
	.fingle-up{transform: rotate(90deg);}
	.eliplis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
	.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
	.paybox{background-color: #fff;border-radius: 20upx;}
	.choosetype{padding: 20upx 40upx 20upx 0;font-size: 30upx;color: #333;margin-top: 24upx;text-indent: 20upx;}
	.action-section {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		align-items: center;
		width: 100%;
		height: 94upx;
		background: #fff;
	}
	.label-2-text{font-size: 28upx;color: #333;margin-left: 20upx;}
	.ordersub::after{border: none;}
	.ordersub{color: #fff;font-size: 30upx;border:none;display: block;width:210upx;background-color:#EC6104;padding: 0;margin:0;}
	.rebtn{color: #fff;background:linear-gradient(90deg,rgba(92,171,246,1) 0%,rgba(30,132,232,1) 100%);margin: 160upx auto 0;display:block;font-size: 30upx;border-radius: 4upx;width:456upx;height: 76upx;line-height: 76upx;}
	.rebtn::after,.code::after{border: none;}
	.code{color: #007AFF;font-size: 30upx;border:none;display: inline-block;width:180upx;background-color: #fff;padding: 0;}
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}
	
	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	
	.uni-tip-content {
		text-align: center;
		font-size: 28upx;
		color: #666;
	}
	
	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15px;
		border-top: 1px solid #eee
	}
	
	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
</style>
